<template>
	<view class="">
		<!-- pages/meetingCreate/collectInfo/collectInfo.wxml -->
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">信息收集</block>
		</cu-custom>
		<view class="page-body">
			<scroll-view :scroll-y="true" style="height: 1200rpx">
				<view class="page-section flex align-center" v-for="(item, index) in list" :key="index">
					<view class="title" :data-title="item.formTitle" :data-index="index" @tap="changeTitle">
						{{ item.formTitle }}</view>

					<view class="inputk">
						<input v-if="item.formType == 'input-single'" class="weui-input" placeholder="请输入" />
						<textarea v-if="item.formType == 'input-multi'" class="weui-input" @blur="bindTextAreaBlur"
							auto-height placeholder="请输入" />
						<u-upload name="1" v-if="item.formType == 'image'" multiple></u-upload>
						<picker v-if="item.formType == 'select'" class="messagexz_con" @change="selectMsgType"
							:value="item.index" :range="item.array">
							<text lines="1" class="pickertext">{{ item.array[item.index] }}</text>
							<view class="icon_1"></view>
						</picker>
					</view>

					<view class="delicon flex align-center">
						<image
							v-if="item.formType == 'select'"
							:data-index="index"
							@tap.native="editSelect"  src="../../../static/edt.png" style="width: 60upx;height: 60upx;" mode=""></image>
						<image
							:data-index="index"
							@tap.native="removeParam"  src="../../../static/del.png" style="width: 60upx;height: 60upx;" mode=""></image>
					</view>
				</view>
				<view class="addBtn flex align-center justify-center"  @tap="addParam">
					<image src="../../../static/add_line.png" mode=""></image>
					<text>新增字段</text>
				</view>
<!-- 				<button type="primary" @tap="addParam">
					<mp-icon icon="add" color="#1A75FF"></mp-icon>
					新增字段
				</button> -->
			</scroll-view>

			<button @tap="save" class="successbtn" type="default">完成</button>
		</view>

	</view>
</template>

<script>
	// pages/meetingCreate/collectInfo/collectInfo.js
	export default {
		components: {},
		data() {
			return {
				list: [{
					formType: 'input-single',
					formTitle: '点我修改'
				}],
				delFormIdList: []
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var collectionList =JSON.parse(options.forms);
			if (collectionList && collectionList.length > 0) {
				var list = [];
				collectionList.forEach((item) => {
					if (item.formRange) {
						item['array'] = item.formRange.split('\n');
					}

					list.push(item);
				});
				this.list = list;
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			changeTitle(e) {
				var that = this;
				var title = e.currentTarget.dataset['title'];
				var index = e.currentTarget.dataset['index'];
				console.log(index);
				uni.showModal({
					title: '编辑标题',
					content: title,
					editable: true,

					success(res) {
						if (res.confirm) {
							var content = res.content.trim();
							var key = 'list[' + index + '].formTitle';
							that.list[index].formTitle = content;
							console.log(that.list);
						}
					}
				});
			},

			editSelect(e) {
				var index = e.currentTarget.dataset['index'];
				var content = this.list[index].array.join('\n');
				uni.setStorageSync('selectRange', content);
				uni.navigateTo({
					url: '/pages/qd/qdmodal/editSelect?index=' + index
				});
			},

			updateSelectRange(index, arr) {
				var key = 'list[' + index + '].array';
				var key_range = 'list[' + index + '].formRange';
				this.list[index].formRange = arr.join('\n');
				this.list[index].array = arr;
				console.log(this);
			},

			//新增字段
			addParam() {
				var that = this;
				uni.showActionSheet({
					itemList: ['单行输入框', '多行输入框', '选择框', '上传图片'],

					success(res) {
						var item = undefined;

						if (res.tapIndex == 0) {
							//单行输入框
							item = {
								formType: 'input-single',
								formTitle: '单行输入'
							};
						} else if (res.tapIndex == 1) {
							//多行输入框
							item = {
								formType: 'input-multi',
								formTitle: '多行输入'
							};
						} else if (res.tapIndex == 2) {
							//选择框
							item = {
								formType: 'select',
								formTitle: '选择框',
								fromRange: '',
								index: 0,
								array: []
							};
						} else if (res.tapIndex == 3) {
							//上传图片
							item = {
								formType: 'image',
								formTitle: '上传图片'
							};
						}

						if (item) {
							that.list = that.list.concat(item)
						}
					}
				});
			},

			//移除字段
			removeParam(e) {
				var index = e.currentTarget.dataset['index'];
				var list = this.list;
				var item = list[index];
				var delFormIdList = this.delFormIdList;

				if (item.id) {
					delFormIdList.push(item.id);
				}

				list.splice(index, 1);
				this.list = list;
				this.delFormIdList = delFormIdList
			},

			//保存数据
			save() {
				var that = this;
				var list = this.list;
				console.log(list);

				try {
					this.$api.prePage().form.forms = list
					uni.navigateBack();
				} catch (e) {
					console.log(e);
				}
			},

			bindTextAreaBlur() {
				console.log('占位：函数 bindTextAreaBlur 未声明');
			},

			selectMsgType() {
				console.log('占位：函数 selectMsgType 未声明');
			}
		}
	};
</script>
<style lang="scss">
	/* pages/meetingCreate/collectInfo/collectInfo.wxss */
	page {
		background-color: #f2f2f2;
	}
	.page-body{
		padding: 32upx;
	}
	.addBtn{
		width: 200upx;
		height: 60upx;
		background: #FFFFFF;
		border-radius: 30upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1A75FF;
		image{
			width: 24upx;
			height: 24upx;
			margin-right: 5upx;
		}
	}
	.title {
		display: inline-block;
		width: 178rpx;
		color: rgba(26, 117, 255, 1);
		font-size: 32rpx;
		padding-left: 10rpx;
		float: left;
	}

	.inputk {
		display: inline-block;
		width: 350rpx;
	}

	.inputk_edite {
		display: inline-block;
		width: 280rpx;
		border: 1px solid #ddd;
		padding: 10rpx 6rpx;
		min-height: 88rpx;
	}

	.page-section {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 30upx;
		padding: 10px;
	}

	.delicon {
		float: right;
		margin-right: 10rpx;
	}

	.weui-cells {
		border: 0;
		background-color: none;
	}

	button[type='primary'] {
		color: rgba(26, 117, 255, 1);
		font-size: 28rpx;
		background-color: #fff !important;
		border: rgba(26, 117, 255, 1) 1px solid;
	}

	.fr {
		padding-right: 20rpx;
	}

	.pickertext {
		width: 150rpx;
		display: inline-block;
	}

	button[type='default'].successbtn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: rgba(26, 117, 255, 1);
		color: #fff;
		width: 100%;
		border-radius: 0;
		padding: 0;
	}

	.icon_1 {
		width: 24rpx;
		height: 24rpx;
		background: url('https://hd.kotom.cn/profile/svg/xl.svg') 100% no-repeat;
		background-size: 100% 100%;
		display: inline-block;
		flex-direction: column;
		margin: 6rpx 0 6rpx 20rpx;
	}

	.messagexz_con {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 32rpx;
		width: 196rpx;
		flex-direction: row;
		display: block;
		justify-content: space-between;
		padding: 12rpx 24rpx 12rpx 32rpx;
	}
</style>
